<template>
	<my-field :label="data.label" :needRightIcon="false">
		<my-upload v-model="obj.value" :maxSize="singleSize" :maxCount="data.config.maxNum"></my-upload>
	</my-field>
  <!-- <van-cell class="self-cell" @click="selectEvent">
      <div slot="title" class="self-van-cell__title">
          {{data.label}}
      </div>
      <template>
            <uploader
                v-model="data.value"
                :maxNum="data.config.maxNum"
				:multiple="data.config.multiple" 
                :singleSize="singleSize"
                :businessId="businessId"
                :readonly="data.readonly">
            </uploader>
      </template>
  </van-cell> -->
</template>
<script>
import MyUpload from '@/components/my_upload.vue'
import MyField from '@/pages_form/components/my-field.vue'
import * as uploadApi from '@/interface/common/upload.js'
export default {
	components: {MyField,MyUpload},
    props: {
        data: {
            type: Object,
            required: true
        },
        businessId: {
			type: String,
			default: ''
		}
    },
    computed:{
        singleSize(){
            let size = 0;
            const singleSize = this.data.config.singleSize,
            sizeUnit = this.data.config.sizeUnit;
            if (sizeUnit == 'KB') size = parseInt(singleSize / 1024);
            else if (sizeUnit == 'GB') size = singleSize * 1024;
            else if (sizeUnit == 'TB') size = singleSize * Math.pow(1024, 2);
            return size;
        }
    },
	data(){
	    return {
			obj: JSON.parse(JSON.stringify(this.data))
	    }
	},
	mounted() {
		const v = this
		if (v.businessId && (!v.obj.value || v.obj.value.length == 0)) v.initData()
	},
	watch:{
	    obj: {
		    deep: true,
		    handler() {
			   this.$emit('fieldValueChange', this.obj)
		    }
	    },
		businessId: function() {
			const v = this
			if (v.businessId && (!v.obj.value || v.obj.value.length == 0)) v.initData()
		}
	},
    methods:{
		initData () {
			const v = this
			uploadApi.getFileList(v.businessId).then(res=>{
			   let files = res.data.map(file => {
				   return {
					   id: file.id,
					   name: file.name,
					   url: v.$util.formatImageIdUrl(file.id),
					   status: 'done'
				   }
			   })
			   v.obj.value = files
			});
		},
        selectEvent(){
            console.log(this.data);
        }
    }
}
</script>

<style scoped>
.self-cell {
    display: block;
}
.self-van-cell__title {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    flex: none;
    box-sizing: border-box;
    width: 100% !important;
    margin-right: 12px;
    color: #646566;
    text-align: left;
    word-wrap: break-word;
    padding-bottom: 8px;
}
</style>